<template>
	<view class="page-container">
		<scroll-view class="course-list" scroll-y @scrolltolower="getClassList">
			<view class="course-item flex" v-for="(course, index) of rcList" :key="index" @click="goDetail(course.rollcall_id)">
				<view class="class-name">
					<image v-if="index % 4 == 0" src="/static/class_img_1.jpg" mode="scaleToFill"></image>
					<image v-else-if="index % 4 == 1" src="/static/class_img_2.jpg" mode="scaleToFill"></image>
					<image v-else-if="index % 4 == 2" src="/static/class_img_3.jpg" mode="scaleToFill"></image>
					<image v-else src="/static/class_img_4.jpg" mode="scaleToFill"></image>
				</view>
				<view class="course-info flex flex-direction justify-center">
					<text class="course-name font-bold">{{ course.add_time||course.rollcall.add_time | filterTime }} {{ course.title || course.rollcall.title }}</text>
					<text class="teacher-name">{{ course.class_course_teacher.course_teacher_name }}</text>
				</view>
				<view class="flex align-center">
					<text class="cuIcon-right"></text>
				</view>
			</view>
			<uni-load-more :status="pageInfo.status"></uni-load-more>
		</scroll-view>
		
		<view v-if="isTeacher" class="create-box">
			<view class="create-rc primary-btn" type="primary" @click="openCreate">创建点名</view>
		</view>
		
		<open-alert ref="create_dialog" AlertPosition="bottom">
			<view class="create-form flex flex-direction align-center">
				<view class="form-title-box flex justify-center">
					<view class="form-title font-bold">创建点名</view>
				</view>
				<input class="rc-name" type="text" v-model="classInfo.title" placeholder="请输入点名标题" />
				<view class="sub-btn primary-btn" @click.stop="createRC">确定</view>
			</view>
		</open-alert>
	</view>
</template>

<script>
const {appLogin,httpGet,httpPost,msg,ZC} = require("@/utils/common.js")
import getLocation from '../../utils/get_site.js';

export default {
	data() {
		return {
			isTeacher: false,
			userInfo: {},
			pageInfo: { status: 'more', page: 1, pages: null, pageSize: 20 },
			rcList: [],
			classInfo: {
				title: '',
				lat: '',
				lng: ''
			},
			isAllow: false
		}
	},
	onLoad() {
		appLogin((userInfo) => {
			this.course_teacher_id = getApp().globalData.target_info.course_teacher_id
			this.student_id = userInfo.student_id
			
			if(!this.course_teacher_id && userInfo.course_teacher_list && userInfo.course_teacher_list.length>0){
				var course_teacher = userInfo.course_teacher_list[0];
				console.log(course_teacher)
				this.course_teacher_id = course_teacher.course_teacher_id
			}
			if(this.course_teacher_id){
				this.isTeacher = true;
			}
			
			
			// if(this.course_teacher_id) {
			// 	let _chache = getApp().globalData.course_teacher_info;
			// 	this.userInfo = Object.keys(_chache).length ? _chache : userInfo.course_teacher_list[0];
			// 	this.isTeacher = true;
			// 	getLocation().then(res => {
			// 		if (res) {
			// 			this.classInfo.lat = res.latitude;
			// 			this.classInfo.lng = res.longitude;
			// 		}
			// 	});
			// } else {
			// 	this.userInfo = userInfo.student;
			// }
			this.getClassList();
		});
	},
	methods: {
		goDetail(id) {
			// console.log(id);
			uni.navigateTo({
				url: `./call-info/call-info?rid=${id}`
				// url: `./call-info/call-info`
			});
		},
		openCreate() {
			console.log(this,this.$refs)
			this.$refs.create_dialog.Show();
		},
		createRC() {
			if (!this.classInfo.title) {
				uni.showToast({
					icon: 'none',
					title: '请输入点名标题'
				});
			} else if (!this.classInfo.lat) {
				// uni.showToast({
				// 	icon: 'none',
				// 	title: '未能获取到您的位置信息'
				// });
				// return;
				getLocation().then(res => {
					if (res) {
						this.classInfo.lat = res.latitude;
						this.classInfo.lng = res.longitude;
						this.subForm();
					} else {
						uni.showToast({
							icon: 'none',
							title: '未能获取到您的位置信息'
						});
					}
				});
			} else {
				this.subForm();
			}
		},
		subForm() {
			this.$refs.create_dialog.Close();
			this.classInfo.course_teacher_id = this.course_teacher_id;
			uni.showLoading({ mask: true });
			this.$u.request({
				url: 'users/rollcall/create',
				data: this.classInfo,
				success: res => {
					// console.log(res);
					if (res.code == 200) {
						uni.showToast({
							content: '创建成功'
						});
						this.refreshList();
					}
				},
				complete: () => {
					uni.hideLoading();
				}
			});
		},
		refreshList() {
			Object.assign(this.pageInfo, { status: 'more', page: 1, pages: null });
			this.rcList.splice(0);
			this.getClassList();
		},
		getClassList() {
			let _page = this.pageInfo;
			if (['loading', 'nomore'].includes(_page.status)) return;
			
			let url, param;
			if (this.isTeacher) {
				url = 'users/rollcall/teacher_list';
				param = { course_teacher_id: this.course_teacher_id };
			} else {
				url = 'users/rollcall/student_list';
				param = { student_id: this.student_id };
			}
			
			uni.showLoading({ mask: true });
			_page.status = 'loading';
			this.$u.request({
				url: url,
				method: 'GET',
				data: param,
				success: res => {
					if (res.code == 200) {
						let result = res.result;
						if (_page.pages == null) _page.pages = Math.ceil(result.count / 20);
						this.rcList = this.rcList.concat(result.list);
						_page.page++;
						_page.status = _page.page > _page.pages ? 'nomore' : 'more';
					}
				},
				complete: () => {
					uni.hideLoading();
				}
			});
		}
	},
	filters: {
		filterTime(val) {
			return val.substr(5, 5).replace('-', '/');
		}
	}
}
</script>

<style lang="scss" scoped>
.flex-column{
	flex-direction: column;
}

.font-bold{
	font-weight: bold;
}

.page-container{
	width: 100vw;
	height: 100vh;
	background-color: $uni-bg-color-grey;
}

.course-list{
	width: 100%;
	height: 100%;
	padding: 32rpx 28rpx 30rpx;
}

.course-item{
	background-color: #FFFFFF;
	padding: 28rpx;
	border-radius: 20rpx;
	.class-name{
		width: 208rpx;
		height: 138rpx;
		image{
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}
	.course-info{
		flex: 1;
		padding-left: 28rpx;
		.course-name{
			font-size: 30rpx;
		}
		.teacher-name{
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}
	}
	.cuIcon-right{
		font-weight: bold;
		color: #999999;
		font-size: 24rpx;
	}
	& + &{
		margin-top: 18rpx;
	}
}

.create-box{
	width: 100%;
	padding: 0 78rpx 90rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	.create-rc{
		width: 100%;
		padding: 26rpx;
		border-radius: 100rpx;
	}
}

.create-form{
	width: 100vw;
	background-color: #FFFFFF;
	padding: 40rpx 108rpx 108rpx;
	border-radius: 30rpx 30rpx 0 0;
	.form-title{
		font-size: 30rpx;
		position: relative;
		&::before, &::after{
			content: '';
			width: 22rpx;
			height: 4rpx;
			background-color: #3D8DFF;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
		&::before{
			left: -38rpx;
		}
		&::after{
			right: -38rpx;
		}
	}
	.rc-name{
		width: 100%;
		margin-top: 130rpx;
		text-align: center;
		padding: 0 24rpx;
		height: 74rpx;
		line-height: 74rpx;
		border: 1px solid #E5E5E5;
		border-radius: 10rpx;
	}
	.sub-btn{
		width: 204rpx;
		padding: 22rpx 0;
		border-radius: 100rpx;
		margin-top: 42rpx;
	}
}

.primary-btn{
	text-align: center;
	background-color: #2B83FF;
	color: #FFFFFF;
	&:active{
		background-color: #2477EA;
		color: #DDDDDD;
	}
}
</style>
